<template>
	<view class="container">
		<view class="order-box" v-for="(item,index) in dataList" :key="index">
			<view class="order-money">
				<view class="order-status">已支付</view>
				<view class="money-num">
					预定金：<view class="money">￥100.00</view>
				</view>
			</view>
			<view class="order-line"></view>
			<view class="order-info" @tap="goDetail">
				<image class="logo" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596021671280&di=05e22f8331400d88d3ba95881c79cdd8&imgtype=0&src=http%3A%2F%2Fimg.91huoke.com%2Fxxfl%2Fhk91%2Fcustomer%2F23749%2Fbrg7iG2JSGB8c0ZGkftHQ7XWfzppbW9vbHNuIlBZ.jpeg"></image>
				<view class="name-address">
					<view class="name">郑州富士康科技集团</view>
					<view class="address">郑州市航空港区</view>
				</view>
				<image class="arrow" src="../../static/images/arrow.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [1, 2, 3]
			}
		},
		
		methods: {
			
			goDetail() {
				uni.navigateTo({
				  url: '/pages/internship_detail/internship_detail?id=1'
				})
			}
			
		}
	}
</script>

<style>
	page {
		background-color: #eeeeee;
	}
	
	.container {
		width: 750rpx;
		height: auto;
	}
	
	.order-box {
		width: 750rpx;
		height: auto;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20rpx;
	}
	
	.order-money {
		width: 660rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.order-status {
		font-size: 24rpx;
		color: #fb3204;
	}
	
	.money-num {
		font-size: 24rpx;
		color: #333333;
	}
	
	.money {
		display: inline-block;
		color: #666666;
		font-size: 30rpx;
	}
	
	.order-info {
		width: 660rpx;
		height: 150rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.logo {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
	}
	
	.name-address {
		margin-left: 20rpx;
	}
	
	.name {
		font-size: 28rpx;
		color: #333333;
	}
	
	.address {
		font-size: 24rpx;
		color: #666666;
		margin-top: 10rpx;
	}
	
	.arrow {
		width: 24rpx;
		height: 24rpx;
		margin-left: 240rpx;
	}
	
	.order-line {
		width: 680rpx;
		height: 2rpx;
		background-color: #f5f5f5;
	}
</style>
